<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="false"><block slot="content">商城</block></cu-custom>
		<view style="width: 100%;">
			<view style="height:190rpx">
				<view style="height:100rpx"><SearchBar @tap="search()"></SearchBar></view>
				<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true" style="position: fixed;z-index: 199999;width: 100%;" :style="{top:(CustomBar+50)+'px'}">
					<view
					v-for="(item, index) in menuList" 
					:key="item.id" 
					class="nav-item"
					:class="{current: index === TabCur}"
					@tap="tabChange(index)"
					:id="'item-' + index"
					>
						<text class="title">{{item.tag_name}}</text>
					</view>
				</scroll-view>
			</view>
			<mescroll-uni ref="mescrollRef" @init="mescrollInit" height="78%" top="0" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
				<GoodsCard :productList="goodsList"></GoodsCard>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import goodsFilter from '@/components/yb-filter/index.vue'
	import SearchBar from '@/components/search.vue'
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import GoodsFlow from '@/components/goods/GoodsFlow.vue'
	import * as Goods_API from '@/api/goods.js'
	import * as Cart_API from '@/api/cart.js'
	import * as Home_API from '@/api/home.js' 
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js"
	import ssScrollNavbar from '@/components/ss-scroll-navbar/ss-scroll-navbar.vue'
	import {share} from '@/utils/Foundation.js'
	export default {
		mixins: [MescrollMixin,MescrollMoreItemMixin], 
		components:{
			goodsFilter,
			SearchBar,
			GoodsCard,
			GoodsFlow,
			ssScrollNavbar
		},
		data() {
			return {
				menuList:[
					{tag_name:'综合'},
					// {label_name:'上架新品',mark:'new'},
					// {label_name:'热卖',mark:'hot'},
					// {label_name:'推荐',mark:'recommend'},
				],
				scrollLeft: 0,
				TabCur: 0,
				// 默认双列显示
				goodsListTemplate: 2,
				// 过滤参数
				curCateFid:'',
				goodsList:[],
				shop_id:uni.getStorageSync('shop').shop_id,
				goodsFilterFixed:true,
				params:{
					page_no:1,
					page_size:20,
					seller_id:uni.getStorageSync('shop').shop_id
				},
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false,
					noMoreSize: 8, //列表的总数量要大于半页才显示无更多数据;默认5
					empty:{
						icon:'/static/images/empty/empty_collection.png',
						tip: '没商品数据'
					}
				},
				cateList:[{name:'新品上架',value:'100001'},{name:'店铺热卖',value:'100002'},{name:'店家推荐',value:'100003'}],
				widthList: [],
				screenWidth: 0,
				izReturn:false,
				checkReturn:0,
				loading:false,
				CustomBar: this.CustomBar
			};
		},
		onLoad(e) {
			// if(e.seller_id){
			// 	uni.setStorageSync('shop',{id:e.seller_id})
			// 	this.params.seller_id = e.seller_id
			// }
			// console.log('mall onload',e)
			this.loading = true
			this.GET_MenuList()
			setTimeout(()=> {
				if(e.operation_param){
					this.loading = false
					this.izReturn = true
					this.checkReturn =1
					this.menuList.map((item,index) =>{
						if(item.mark === e.operation_param){
							// console.log('item',index )
							this.params.mark = e.operation_param
							this.TabCur = index
							this.scrollLeft = (index) * 100
							return
						}
					}) 
				}
				this.tabChange(this.TabCur)
			}, 200);
		},
		onShow() {
			if(this.checkReturn != 1){
				this.izReturn = false
			}
			this.GET_MenuList()
		},
		onPageScroll(e) {
		    scrollTop:0
		},
		methods:{
			onShareAppMessage() {
				let page_path = 'pages/mall/mall'
				let mobile = uni.getStorageSync('userInfo').mobile
				let user = uni.getStorageSync('userInfo').nickname
				let shop_name = uni.getStorageSync('shop').shop_name
				let shop_id = uni.getStorageSync('shop').shop_id
				let title = ''
				let path = ''
				if(mobile && shop_id){
					title = user + '分享的'+shop_name
					path = page_path+'?shop_id='+shop_id+'&sharePhone='+mobile
				}else if(shop_id){
					title = shop_name
					path =  page_path+'?shop_id='+shop_id
				}
			    return {
					title: title,
					path: path
			    }
			},	
			GET_MenuList(){
				let menuList = uni.getStorageSync('menuList')
				if(!menuList && menuList.length<=1){
					let shop_id = uni.getStorageSync('shop').shop_id
					let params = {
						sellerId :shop_id
					}
					Home_API.getLabel(params).then(res =>{
						if(res){
							if(res.length>0){
								this.menuList = [{tag_name:'综合'}]
								res.map(item =>{
									this.menuList.push(item)
								})
								uni.setStorageSync('menuList',this.menuList)
							}
						}
					})
				}else{
					this.menuList = menuList
				}
			},
			// 排序，筛选更改
			goodsFilterChanged(filter){
				console.log("filter:",filter)
				this.params.page_no = 1
				if(filter.sort){
					switch(filter.sort){
						case 0:
						this.params
					}
				}
			},
			touchcard(e){
				console.log('点击项的id为'+e)
			},
			flowend(){
				console.log('加载完毕')
			},
			/*下拉刷新的回调 */
			downCallback(page) {
				this.params.page_no = 1
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				if(!this.izReturn && this.loading){
					Goods_API.getTagsList(this.params).then(res =>{
						this.mescroll.endSuccess(res.data.length)
						if(this.params.page_no ==1) this.goodsList = []
						if(this.checkReturn ==1 && this.params.page_no ==1){
							this.goodsList = res.data
						}else{
							this.goodsList = this.goodsList.concat(res.data)
						}
						this.params.page_no+=1
					}).catch(()=>{
						this.mescroll.endErr();
					})
				}
			},
			//点击空布局按钮的回调
			emptyClick(){
				uni.showToast({
					title:'点击了按钮,具体逻辑自行实现'
				})
			},
			tabChange (index) {
				this.izReturn = false
				this.params.page_no =1
				this.$emit('navbarTap', index);
				this.navbarTapHandler(index)
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -=  this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
				this.scrollLeft = (index) * 100
			},
			navbarTapHandler (index) {
				if(this.menuList[index].mark) this.params.mark = this.menuList[index].mark
				else delete this.params.mark
				this.TabCur = index
				this.goodsList = []
				this.loading = true
				this.upCallback()
			},
			search(){
				uni.navigateTo({
					url:'../commons/search'
				})
			}
		},
		computed: {
			goodsListTemplateType: function() {
				return this.goodsListTemplate;
			},
			// 商品过滤器参数 <!-- //1：按距离，2：按销量，3：按人气，4：按最新，5：按价格 -->
			goodsFilters:function() {
				// filterType为0，普通方式，无排序，1：排序模式
				const cateOptions = [{name:'综合',value:'10'},...this.cateList];
				return [
					{title:'综合',value:0,filterType:2,options:cateOptions},
					{title:'销量',value:2,filterType:1, initAscState:true},
					{title:'价格',value:5,filterType:1, initAscState:true}
				]
			}
		},
	}
</script>

<style lang="scss">
.ss-scroll-navbar {
		width: 100%;
		height: 90upx;
		box-shadow: 0 2upx 8upx rgba(0,0,0,.06);
		background-color: #fff;
		white-space:nowrap;
		
		.nav-item {
			height: 90upx;
			min-width: 200rpx;
			text-align: center;
			padding: 0upx 20upx;
			color: #303133;
			display: inline-block;
			position: relative;
			font-size: 24upx;
			
			.title {
				line-height: 90upx;
			}
			
			&:after{
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid $color-main;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		.current{
			color: $color-main;
			font-size: 28upx;
			font-weight: 600;
			&:after{
				width: 50%;
			}
		}
	}
</style>
